<template>
	<div class="danpiaojunjiamonth" ref='danpiaojunjiamonth'>
		<h2 class="titleSelf">单票均价月度情况</h2>
		<div class="contentSelf">
			<div ref="danpiaojunjiamonthChart" class="danpiaojunjiamonthChart"></div>
		</div>

	</div>

</template>

<script>
	export default {
		name: 'danpiaojunjiamonth',
		components: {

		},
		data() {
			return {

			}
		},
		mounted() {
			var that = this;
			that.getEchartData()
			setInterval(function() {
				that.getEchartData()
			}, 30000)
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getEchartData() {
				const danpiaojunjiamonthChart = this.$refs.danpiaojunjiamonthChart;
				if (danpiaojunjiamonthChart) {
					const myChart = this.$echarts.init(danpiaojunjiamonthChart)
					var that = this;
					var startDate = that.commonFunction.getLastYearYestdy()[0] + '-' + that.commonFunction.getLastYearYestdy()[1];
					var endDate = that.commonFunction.formatDate()[0] + '-' + that.commonFunction.getLastYearYestdy()[1];
					// console.log(startDate,endDate)
					that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							start: startDate,
							end: endDate,
							dtype: "M",
							ie: "I"
						}
					}).then(function(data0) {
						if (data0.status == "200") {
							var dataMonth = [];
							var dataImportValue = [];
							var dataArr = data0.data.result.hn_business_trends;
							dataArr.forEach(function(dd) {
								dataMonth.push(dd.REPORTDATE);
								var _junjia_I = (dd.GOODVALUE / dd.AMOUNT).toFixed(2);
								//进口均价
								dataImportValue.push(_junjia_I);
							});

							let dataExportValue = [];
							that.$myHttp.get("getBusinessTrendsInfo", {
								params: {
									start: "2020-04",
									end: "2021-04",
									dtype: "M",
									ie: "E"
								}
							}).then(function(data0) {
								if (data0.status == "200") {
									var dataArr2 = data0.data.result.hn_business_trends;

									dataArr2.forEach(function(dd2) {
										var _junjia_E = (dd2.GOODVALUE / dd2.AMOUNT).toFixed(2);

										//出口均价
										dataExportValue.push(_junjia_E);

										var getsyzl = dataMonth;
										var getwkrs = dataImportValue;
										var getlkrs = dataExportValue;
										// console.log("getsyzl:"+getsyzl);
										// console.log("getwkrs:"+getwkrs);
										// console.log("getsyzl:"+getlkrs);

										// var  getsyzl=['2014','2015','2016','2017','2018','2019'];
										// var  getwkrs=[826,673,588,782,779,855];
										// var  getlkrs=[686,703,788,882,779,785,686,703,788,882,779,785];

										const option = {
											grid: {
												left: '12%',
												top: '20%',
												bottom: '20%',
												right: '10%'
											},
											// legend: {
											// 	data: ['进口','出口'],
											//        right: "3%",
											// 	top:"4%",
											//        textStyle: {
											//            color: "#A1D5FF",
											// 		fontSize: 12
											//        },
											// 	itemWidth: 12,  // 设置宽度
											// 	itemHeight:16, // 设置高度
											// 	itemGap: 12 // 设置间距
											//    },
											legend: {
												data: ['进口', '出口'],
												show: true,
												icon: "plain",
												top: "top",
												right: "10%",
												itemWidth: that.commonFunction.fontSize(0.2),
												itemHeight: that.commonFunction.fontSize(0.1),
												itemGap: that.commonFunction.fontSize(0.1),
												textStyle: {
													color: '#fff',
													fontSize: that.commonFunction.fontSize(0.12),
												}
											},
											xAxis: [{
												data: getsyzl,
												axisLabel: {
													margin: 10,
													color: '#fec400',
													textStyle: {
														fontSize: that.commonFunction.fontSize(0.1),
													},
													rotate: '30',
												},
												axisLine: {
													show: true,
													lineStyle: {
														color: '80',
														width:2,
													}
												},
												axisTick: {
													show: false
												},
											}],
											yAxis: [{
												name: "单位(元)",
												nameTextStyle: {
													color: '#fff',
													fontSize: that.commonFunction.fontSize(0.12),
													padding: [0, 0, 0, -that
														.commonFunction.fontSize(
															0.2)
													]
												},
												type: 'value',
												axisLabel: {
													color: '#00fce6',
													textStyle: {
														fontSize: that.commonFunction.fontSize(0.12),
													},
												},
												axisLine: {
													show: true,
													lineStyle: {
														color: '#465159',
														width:0.5
													}
												},
												axisTick: {
													show: false
												},
												splitLine: {
													show: false,
													lineStyle: {
														color: '#00fce6',
														width: 0.5,
														type: 'dashed',
													}
												}
											}],
											series: [{
												name: "进口",
												type: 'bar',
												data: getwkrs,
												barWidth: '12px',
												itemStyle: {
													normal: {
														color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
															offset: 0,
															color: 'rgba(193,201,15,0.6)' // 0% 处的颜色
														}, {
															offset: 1,
															color: 'rgba(193,201,15,0.4)' // 100% 处的颜色
														}], false),
														// barBorderRadius: [30, 30, 0, 0],
																				
														borderColor: 'rgba(193,201,15,1)',
														borderWidth: 1,
														borderType: 'solid',
													}
												},
												// itemStyle: {
												// 	normal: {
												// 		color: new that.$echarts
												// 			.graphic.LinearGradient(0,
												// 				0, 0, 1, [{
												// 					offset: 0,
												// 					color: 'rgba(193,201,15,0.6)' // 0% 处的颜色
												// 				}, {
												// 					offset: 1,
												// 					color: 'rgba(193,201,15,0.4)' // 100% 处的颜色
												// 				}], false),
												// 		// barBorderRadius: [30, 30, 0, 0],
												// 	}
												// },
											}, {
												name: "出口",
												type: 'bar',
												data: getlkrs,
												barWidth: '12px',
												
												itemStyle: {
													normal: {
														color: new that.$echarts
															.graphic.LinearGradient(0,
																0, 0, 1, [{
																	offset: 0,
																	color: 'rgba(0,252,230,0.6)' // 0% 处的颜色
																}, {
																	offset: 1,
																	color: 'rgba(0,252,230,0.2)' // 100% 处的颜色
																}], false),
														// barBorderRadius: [30, 30, 0, 0],
													}
												},
											}]
										}
										myChart.setOption(option)
										window.addEventListener("resize", function() {
											myChart.resize()
										})
									});
								}
							});



						} else {
							alert("数据请求错误")
						}

					}).catch(function(error) {
						alert(error)
					});

				}
			}
		}
	}
</script>

<style scoped>
	.danpiaojunjiamonth {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.danpiaojunjiamonthChart {
		width: 100%;
		height: 100%;
	}
</style>
